<template>
    <div class="skeleton-loader" :class="type">
      <!-- 文章卡片骨架屏 -->
      <template v-if="type === 'article'">
        <div 
          class="skeleton-article" 
          v-for="n in count" 
          :key="n"
          :style="{ animationDelay: `${(n - 1) * 0.1}s` }"
        >
          <div class="skeleton-cover pulse"></div>
          <div class="skeleton-content">
            <div class="skeleton-title pulse"></div>
            <div class="skeleton-text pulse"></div>
            <div class="skeleton-text pulse"></div>
            <div class="skeleton-tags">
              <div class="skeleton-tag pulse" v-for="i in 3" :key="i"></div>
            </div>
            <div class="skeleton-meta">
              <div class="skeleton-avatar pulse"></div>
              <div class="skeleton-info">
                <div class="skeleton-name pulse"></div>
                <div class="skeleton-stats pulse"></div>
              </div>
            </div>
          </div>
        </div>
      </template>
  
      <!-- 列表项骨架屏 -->
      <template v-else-if="type === 'list'">
        <div 
          class="skeleton-list-item" 
          v-for="n in count" 
          :key="n"
          :style="{ animationDelay: `${(n - 1) * 0.1}s` }"
        >
          <div class="skeleton-title pulse"></div>
          <div class="skeleton-text pulse"></div>
          <div class="skeleton-text pulse" style="width: 60%"></div>
        </div>
      </template>
  
      <!-- 详情页骨架屏 -->
      <template v-else-if="type === 'detail'">
        <div class="skeleton-detail">
          <div class="skeleton-header">
            <div class="skeleton-title pulse"></div>
            <div class="skeleton-meta">
              <div class="skeleton-avatar pulse"></div>
              <div class="skeleton-info pulse"></div>
            </div>
          </div>
          <div class="skeleton-content">
            <div class="skeleton-text pulse" v-for="n in 6" :key="n"></div>
            <div class="skeleton-image pulse"></div>
            <div class="skeleton-text pulse" v-for="n in 4" :key="`text-${n}`"></div>
          </div>
        </div>
      </template>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SkeletonLoader',
    
    props: {
      // 骨架屏类型：article-文章卡片, list-列表项, detail-详情页
      type: {
        type: String,
        default: 'article'
      },
      // 需要显示的骨架屏数量
      count: {
        type: Number,
        default: 1
      }
    }
  }
  </script>
  
  <style>
  .skeleton-loader {
    width: 100%;
  }
  
  /* 通用脉冲动画 */
  .pulse {
    background: linear-gradient(90deg, 
      rgba(240, 240, 240, 0.6) 25%, 
      rgba(240, 240, 240, 0.9) 37%, 
      rgba(240, 240, 240, 0.6) 63%
    );
    background-size: 400% 100%;
    animation: pulse 1.4s ease infinite;
  }
  
  @keyframes pulse {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  
  /* 文章卡片骨架屏 */
  .skeleton-article {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
  }
  
  .skeleton-cover {
    height: 200px;
    width: 100%;
  }
  
  .skeleton-content {
    padding: 16px;
  }
  
  .skeleton-title {
    height: 24px;
    width: 80%;
    margin-bottom: 16px;
    border-radius: 4px;
  }
  
  .skeleton-text {
    height: 16px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 4px;
  }
  
  .skeleton-tags {
    display: flex;
    gap: 8px;
    margin: 16px 0;
  }
  
  .skeleton-tag {
    width: 60px;
    height: 24px;
    border-radius: 12px;
  }
  
  .skeleton-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }
  
  .skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .skeleton-info {
    flex: 1;
  }
  
  .skeleton-name {
    height: 16px;
    width: 100px;
    margin-bottom: 8px;
    border-radius: 4px;
  }
  
  .skeleton-stats {
    height: 14px;
    width: 160px;
    border-radius: 4px;
  }
  
  /* 列表项骨架屏 */
  .skeleton-list-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
  }
  
  .skeleton-list-item .skeleton-title {
    height: 20px;
    width: 70%;
    margin-bottom: 12px;
  }
  
  .skeleton-list-item .skeleton-text {
    height: 14px;
    margin-bottom: 8px;
  }
  
  /* 详情页骨架屏 */
  .skeleton-detail {
    padding: 20px;
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
  }
  
  .skeleton-header {
    margin-bottom: 32px;
  }
  
  .skeleton-header .skeleton-title {
    height: 32px;
    width: 90%;
    margin-bottom: 24px;
  }
  
  .skeleton-header .skeleton-meta {
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .skeleton-content .skeleton-text {
    height: 16px;
    margin-bottom: 16px;
  }
  
  .skeleton-content .skeleton-image {
    height: 300px;
    margin: 24px 0;
    border-radius: 8px;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .skeleton-cover {
      height: 160px;
    }
  
    .skeleton-content {
      padding: 12px;
    }
  
    .skeleton-title {
      height: 20px;
      margin-bottom: 12px;
    }
  
    .skeleton-text {
      height: 14px;
      margin-bottom: 8px;
    }
  
    .skeleton-content .skeleton-image {
      height: 200px;
    }
  }
  </style>